<template>
    <div>
       <!--只有一些css样式引用-->
          <lab_head  />
           <!--页头部导航-->
          <lab_header  />
      <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
      <ul class="cart_list_th clearfix">
          <li class="col01">商品名称</li>
          <li class="col03">商品价格</li>
          <li class="col04">数量</li>
          <li class="col05">小计</li>
          <li class="col06">操作</li>
      </ul>
      <ul class="cart_list_td clearfix" v-for="(sku,index) in cart" :key="index">
          <li class="col01"><input type="checkbox" name="" v-model="sku.selected" @change="update_selected(index)"></li>
          <li class="col02"><img :src="sku.url"></li>
          <li class="col03">{{ sku.name }}</li>
          <li class="col05">{{ sku.price }}元</li>
          <li class="col06">
              <div class="num_add">
                  <a @click="on_add(sku.id,1)" class="add fl">+</a>
                  <input v-model="sku.number" @focus="origin_input=sku.count" @blur="on_input(index)" type="text" class="num_show fl">
                  <a @click="on_add(sku.id,2)" class="minus fl">-</a>
              </div>
          </li>
          <li class="col07">{{sku.total}}元</li>
          <li class="col08"><a @click="on_delete(index)">删除</a></li>
      </ul>
  
      <ul class="settlements">
          <li class="col01"><input type="checkbox" name="" @change="on_selected_all" v-model="selected_all"></li>
          <li class="col02">全选</li>
          <li class="col03">合计(不含运费)：<span>¥</span><em>{{tmoney}}</em><br>共计<b>{{tcount}}</b>件商品</li>
          <li class="col04"><a href="place_order.html">去结算</a></li>
      </ul>
        <lab_footer  />
    </div>
</template>
  
  <script>
  import lab_head from './common/lab_head';
  import lab_header from './common/lab_header';
  import lab_footer from './common/lab_footer';
  export default {
      data(){
          return{
              cart:[],
              userid:0,
              tmoney:0,
              tcount:0
          }
      },
      methods:{
          getmycart(){
              this.userid = localStorage.getItem("userid")
              this.axios.get("course/mycart?userid="+this.userid).then(res=>{
                  this.cart = res.data.glist
                  this.tcount = res.data.tcount
                  this.tmoney = res.data.tmoney
              })
          },
          on_add(gid,type){
              this.axios.get('course/buy?userid='+this.userid+"&courseid="+gid+"&type="+type).then(res=>{
                  this.getmycart()
                  //vue更新
              })
          }
      },
      mounted(){
          this.getmycart()
      },
       //定义组建标签
      components:{
          lab_head,
          lab_header,
          lab_footer,
      },
  
  }
  </script>
  
  <style>
  .total_count{
      width:1200px;margin:0 auto;height:40px;line-height:40px;font-size:14px;
  }
  .total_count em{
      font-size:16px;color:#ff4200;margin:0 5px;
  }
  
  .cart_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;}
  .cart_list_th li{height:40px;line-height:40px;float:left;text-align:center;}
  .cart_list_th .col01{width:36%;}
  .cart_list_th .col02{width:6%;}
  .cart_list_th .col03{width:13%;}
  .cart_list_th .col04{width:12%;}
  .cart_list_th .col05{width:15%;}
  .cart_list_th .col06{width:18%;}
  
  .cart_list_td{width:1198px;border:1px solid #ddd;background-color:#fff9f9;margin:0 auto;margin-top:-1px;}
  .cart_list_td li{height:120px;line-height:120px;float:left;text-align:center;}
  
  .cart_list_td .col01{width:4%;}
  .cart_list_td .col02{width:12%;}
  .cart_list_td .col03{width:20%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .cart_list_td .col04{width:6%;}
  .cart_list_td .col05{width:13%;}
  .cart_list_td .col06{width:12%;}
  .cart_list_td .col07{width:15%;}
  .cart_list_td .col08{width:18%;}
  
  .cart_list_td .col02 img{width:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;}
  .cart_list_td .col03{height:48px;text-align:left;line-height:24px;margin-top:38px;}
  .cart_list_td .col03 em{color:#999}
  .cart_list_td .col08 a{color:#666}
  
  .cart_list_td .col06 .num_add{width:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;}
  .cart_list_td .col06 .num_add a{width:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666}
  .cart_list_td .col06 .num_add input{width:38px;height:28px;text-align:center;line-height:30px;border:0px;display:block;float:left;outline:none;border-left:1px solid #ddd;border-right:1px solid #ddd;}
  
  
  .settlements{width:1198px;height:78px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;}
  .settlements li{line-height:78px;float:left;}
  .settlements .col01{width:4%;text-align:center}
  .settlements .col02{width:12%;}
  .settlements .col03{width:69%; height:48px; line-height:28px;text-align:right;margin-top:10px;}
  .settlements .col03 span{color:#ff0000;padding-right:5px}
  .settlements .col03 em{color:#ff3d3d;font-size:22px;font-weight:bold;}
  .settlements .col03 span{color:#ff0000;}
  .settlements .col03 b{color:#ff0000;font-size:14px;padding:0 5px;}
  
  .settlements .col04{width:14%;text-align:center;float:right;}
  .settlements .col04 a{display:block;height:78px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px}
  
  
  .common_title{width:1200px;margin:20px auto 0;font-size:14px;}
  
  .common_list_con{width:1200px;border:1px solid #dddddd;border-top:2px solid #e3101e;margin:10px auto 0;background-color:#f7f7f7;position:relative;}
  
  .common_list_con dl{margin:20px;}
  .common_list_con dt{font-size:14px;font-weight:bold;margin-bottom:10px}
  .common_list_con dd{margin-bottom:10px;}
  .common_list_con dd.current{font-size:14px;font-weight:bold;}
  .common_list_con dd input{vertical-align:bottom;margin-right:10px}
  
  .edit_site{position:absolute; right:20px;top:30px;width:100px;height:30px;background-color:#fe0000;text-align:center;line-height:30px;color:#fff}
  
  .pay_style_con{margin:20px;}
  .pay_style_con input{float:left;margin:14px 7px 0 0;}
  .pay_style_con label{float:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px}
  
  /* 把标签默认的间距设为0 */
  body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}
  
  /* 让h标签文字大小继承body的文字设置 */
  h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  
  /* 去掉列表默认的图标 */
  ul,ol{list-style:none;}
  
  /* 去掉em默认的斜体 */
  em{font-style: normal;}
  
  /* 去掉a标签默认的下划线 */
  a{text-decoration:none;}
  
  
  /* 去掉加链接时产生的框线 */
  img{border:0;}
  
  /* 清除浮动 */
  .clearfix:before,.clearfix:after{content:"";display:table}
  .clearfix:after{clear:both;}
  .clearfix{zoom:1}
  
  /* 浮动 */
  .fl{float:left}
  .fr{float:right}
  
  </style>